<template>
    <div class="register-wrap" :style="{ backgroundImage: `url(${handleImg('mobile-login-bg.png')})` }">
        <div class="register-form">
            <div class="register-title">注册</div>
            <input v-model="state.registerState.phone" class="register-input" type="text" placeholder="请输入手机号">
            <div style="margin-bottom: 0.2rem;position: relative;">
                <input v-model="state.registerState.code" class="register-input" style="margin-bottom: 0;" type="text"
                    placeholder="请输入验证码">
                <a-button type="link" :disabled="count != 0" class="get-code-btn" @click="sendCode()">{{ count > 0 ?
                    count : '发送验证码' }} </a-button>
            </div>
            <div style="margin-bottom: 0.2rem;position: relative;">
                <input ref="appleInput" v-model="state.registerState.password" class="register-input" type="password"
                    placeholder="请输入6-18位包含大小写字母和数字密码">
                <p class="login_eyeClose" :class="{ 'login_eyeOpen': eyeOpen }" @click="appleToggle"></p>
            </div>

            <div class="register-btn" @click="onFinish">注册</div>

            <div class="login-opts">
                <a-checkbox v-model:checked="checked" style="margin-right: 6px;"></a-checkbox><span>我已阅读并同意<span class="opt"
                        @click="goDocsPrivacy">GpuMall服务协议</span></span>
            </div>
        </div>

        <!-- geetest验证 -->
        <div id="captcha" style="height: 0;">
            <GeetestCaptcha :captcha-config="state.captchaConfig" />
        </div>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { authRegister, authGetCode } from 'api/modules/api.auth'
import { useCountDown } from "@/hooks/sys/useCountDown.js";
import { isvalidPhone } from '@/libs/util.valid.js'
import { XsyMessage } from '@/libs/util.toast'
import { getQueryString } from '@/libs/util.common'
import GeetestCaptcha from "./GeetestCaptcha.vue";

// 倒计时
const { count, countDown } = useCountDown();

const state = reactive({
    registerState: {
        phone: '',
        password: '',
        code: ''
    },
    captchaConfig: {
        config: {
            captchaId: "e0ff0f201c666d314840dfd88a2316f8",
            language: "zho",
            product: "bind",
        },
        handler: captchaHandler,
    },
})

const checked = ref(false)
const onFinish = () => {
    if (!checked.value) {
        XsyMessage.warning("请勾选协议")
        return
    }
    if (!state.registerState.phone) {
        XsyMessage.error('请输入手机号')
        return
    } else if (!state.registerState.password) {
        XsyMessage.error('请输入密码')
        return
    } else if (!state.registerState.code) {
        XsyMessage.error('请输入验证码')
        return
    }

    const params = {
        ...state.registerState,
        invitedUserId: getQueryString('invitedUserId'),
        source: getQueryString('source')
    }

    authRegister(params).then(res => {
        if (res.code == 0) {
            XsyMessage.success('注册成功,请去PC端登录')
            state.registerState.phone = ''
            state.registerState.password = ''
            state.registerState.code = ''
        }
    })
}

function captchaHandler(captchaObj) {
    window.captchaObj = captchaObj;
    captchaObj
        .appendTo("#captcha")
        .onReady(function () {

        })
        .onNextReady(function () {

        })
        .onBoxShow(function () {

        })
        .onError(function (e) {

        })
        .onSuccess(function () {
            if (state.captchaConfig.config.product === "bind") {
                validate();
            }
        });
}

function validate() {
    var result = window.captchaObj.getValidate();
    GeetestResult.value = result;
    if (!result) {
        alert("请先完成验证！");
        return;
    }

    countDown(60, getCode)
}

// 点击发送验证码
function sendCode() {
    if (isvalidPhone(state.registerState.phone)) {
        if (window.captchaObj) {
            window.captchaObj.showCaptcha();
        } else {
            alert("请等待验证初始化完成");
            return false;
        }
    } else {
        XsyMessage.warning('请输入正确手机号');
    }
}

// 调用发送验证码接口
const GeetestResult = ref()
const getCode = () => {
    const params = {
        scene: 'register',
        account: state.registerState.phone,
        type: 'phone',
        ...GeetestResult.value
    }

    authGetCode(params).then(res => {
        (res.code == 0) && XsyMessage.success('发送成功')
    })
};

onMounted(() => {
    let html = document.documentElement;
    html.style.fontSize = 100 * (html.clientWidth / 375) + "px";
    // 监听 window 的 resize 事件．在浏览器窗口变化时再设置下区域高度．
    window.onresize = () => {
        let html = document.documentElement;
        html.style.fontSize = 100 * (html.clientWidth / 375) + "px";
    };
})

// 打开隐私协议
function goDocsPrivacy() {
    window.open(window.location.origin + '/docs/help_document/user_agreement/privacy', '_blank')
}

const eyeOpen = ref(false)
const appleInput = ref()
const appleToggle = () => {
    if (eyeOpen.value) {
        eyeOpen.value = false
        appleInput.value.type = "password"
    } else {
        eyeOpen.value = true
        appleInput.value.type = "text"
    }

}

</script>

<style lang="scss" scoped>
.register-wrap {
    width: 100%;
    height: 100%;
    // background-size: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

.register-form {
    padding: 0.24rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.60) 0%, #FFF 100%);
    border-radius: 0.2rem 0.2rem 0 0;
}

.register-title {
    color: #223354;
    font-family: PingFang SC;
    font-size: 0.17rem;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 0.48rem;
    text-align: center;
}

.register-form {
    width: 3.46rem;
    height: 5.32rem;
    overflow: hidden;
    margin: 0 auto;
    margin-top: auto;


    .register-btn {
        width: 3rem;
        height: 0.45rem;
        border-radius: 4px;
        background: #07F;
        text-align: center;
        line-height: 0.45rem;
        color: #fff;
        font-size: 0.17rem;
        margin-bottom: 1.33rem;
    }

    .register-input {
        width: 3rem;
        border-radius: 4px;
        background: rgba(217, 236, 253, 0.35);
        height: 0.45rem;
        padding: 0.12rem 0.24rem;
        margin-bottom: 0.2rem;
    }

    .login_eyeClose {
        background: url('@/assets/icons/svg/eye_close.svg') no-repeat;
        background-size: 0.12rem;
        width: 0.12rem;
        height: 0.12rem;
        cursor: pointer;
        position: absolute;
        right: 0.1rem;
        top: 0.16rem;
    }

    .login_eyeOpen {
        background: url('@/assets/icons/svg/eye_open.svg') no-repeat;
        background-size: 0.12rem;
    }


    .get-code-btn {
        position: absolute;
        right: 0.1rem;
        top: 0.11rem;
        height: 0.9rem;
        height: 0.26rem;
        border-radius: 0.04rem;
        border: none;
        background: #FFF;
        z-index: 100;
    }

    .login-opts {
        display: flex;
        color: #8A93A7;
        font-size: 0.12rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        align-items: center;

        .opt {
            color: #07F;
            margin-left: 0.06rem;
        }
    }
}

.register-form-button {
    margin-bottom: 1.33rem;
}
</style>
